<!DOCTYPE html>
<html>
    <head>
        <title>Facial Expressions</title>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">	
		<meta property="og:image" content="http://punkoffice.com/facial/assets/ogimage.jpg" />
        <meta property="og:image:type" content="image/jpeg" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta property="og:url" content="http://punkoffice.com/facial/" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Facial Expressions" />
        <meta property="og:description" content="Interactive facial expressions from a 3D scan of a real person" />
        <meta property="fb:app_id" content="1713617305542836"/>
        <script src="lib/hand-1.3.8.js"></script>
        <script src="lib/babylon.js"></script>
        <script src="lib/babylonjs.materials.min.js"></script>
        <script src="lib/jquery-latest.min.js"></script>
        <script src="lib/jquery-ui.min.js"></script>
        <script src="lib/jquery.ui.touch-punch.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-43031697-2', 'auto');
            ga('send', 'pageview');
        </script>
    </head>
    <body>
        <div id="POlogo" onclick="document.location='http://punkoffice.com'"></div>
        <div id="loading"></div>
        <canvas id="canvas"></canvas>
        <div id="HUDleft">
            <h3>Blink</h3>
            <div class="imgSliders" id="sliBlink"></div>
            <h3>Smile</h3>
            <div class="imgSliders" id="sliSmile"></div>
            <h3>Pout</h3>
            <div class="imgSliders" id="sliPout"></div>
            <br>
            <div id="btnWireframe">
                <button onClick="toggleWireframe()">Turn wireframe ON</button>
            </div>
        </div>
        <div id="faces">
            <ul>
                <li><img id="imgDefault" src="assets/faces/default.jpg"></li>
                <li><img id="imgBlink" src="assets/faces/blink.jpg"></li>
                <li><img id="imgSmile" src="assets/faces/smile.jpg"></li>
                <li><img id="imgPout" src="assets/faces/pout.jpg"></li>
            </ul>
        </div>
        <script src="main.js"></script>
    </body>
</html>
